<div id="GenHome" class="OneContainer">
  <div class="row">
    <div class="col-md-4">
      <div class="Panel PanelBlack">
        <div class="PanelTitle">用户信息</div>
        <div class="PanelBody">
          <div class="PanelItem">
            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            用户名: {{ username }}
          </div>
          <div class="PanelItem">
            <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
            创建时间: {{ createDate }}
          </div>
          <div class="PanelItem">
            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
            最后上线: {{ lastDate }}
          </div>
        </div>
      </div>
      <div class="Panel PanelBlue">
        <div class="PanelTitle">用户 {{ username }} 的服务器</div>
        <div class="PanelBody">
          <div class="row">
            <div class="col-sm-6">
              <div class="LogV">{{ AllServerLen }} 个</div>
              <div class="LogK">服务器总数</div>
            </div>
            <div class="col-sm-6">
              <div class="LogV">{{ OnlineLen }} 个</div>
              <div class="LogK">正在运行的服务器</div>
            </div>
          </div>
        </div>
      </div>
      <div class="Panel PanelGreen">
        <div class="PanelTitle">用户 {{ username }}，欢迎使用</div>
        <div class="PanelBody">
          <div class="row">
            <div class="col-sm-6">
              <div class="PanelItem text-center" v-on:click="toRePassword()">
                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                修改密码
              </div>
            </div>
            <div class="col-sm-6">
              <div class="PanelItem text-center">
                <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
                <!-- 您可以在这里附上您的链接，修改 href 属性即可 -->
                <a href="javascript:alert('您的提供商未提供使用说明')">使用说明</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Panel PanelBlack">
        <div class="PanelTitle">用户 API 密匙</div>
        <div class="PanelBody">
          <div class="PanelItem text-center" v-on:click="toApiKey()">
            <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
            我的 API 密匙
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="Panel PanelBlack">
        <div class="PanelTitle">用户 {{ username }} 持有的服务器</div>
        <div class="PanelBody">
          <div class="row">
            <div class="col-md-12">
              <div class="PanelItem" v-for="item of userServerList">
                <div class="row">
                  <div class="col-md-7">
                    <div class="PanelItemInfo">
                      <h4>
                        <p>{{item.serverName}}</p>

                        <p v-text="'文件名:' + item.jarName || '未设置'"></p>
                      </h4>
                      状态:
                      <span v-if="item.run" class="color-green"> 正在运行 </span>
                      <span v-else="item.run" class="color-red"> 关闭 </span>
                      <!--<br>创建时间 ：<span v-text="item.createDate"></span>-->
                      <br />最后启动：
                      <span v-text="item.lastDate"></span>
                      <br />到期:
                      <span v-text="item.timeLimitDate"></span>
                    </div>
                  </div>
                  <div class="col-md-5 NextCol">
                    <div class="GenhomeButton">
                      <button class="btn btn-info" v-on:click="toConsole(item.serverName)">控制 | 管理</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--js-->
<script>
  MI.rListener("onload", function () {
    // 定义页面地址
    TOOLS.definePage("template/gen_home", "genuser/home", "");

    // MCSERVER.colmSet(false);
    VIEW_MODEL.newVue("GenHome", {
      el: "#GenHome",
      methods: {
        toConsole: function (serverName) {
          MCSERVER.listenServername = serverName;
          RES.redirectPage("./template/component/console.html", "server/console", serverName);
        },
        toRePassword: function () {
          RES.redirectPage("./template/component/gen_repassword.html");
        },
        toApiKey: function () {
          // 弹出用户密匙设置窗口
          PAGE.username = this.username;
          TOOLS.popWind({
            style: {
              maxWidth: "600px",
              top: "24%"
            },
            title: "用户 " + PAGE.username + " 的密匙设置",
            template: "template/dialog/apikey.html"
          });
        }
      }
    });
  });

  MI.rListener("onend", function () {});
</script>
